<template>
  <swiper @change="swipeChange" class="pages-swiper" :indicator-dots="true" :autoplay="false">
    <swiper-item v-if="presignedUrl">
      <video indicator-active-color="#f25500" :autoplay="false" id="myVideo" @play="playVedio"
        :src="presignedUrl" @error="videoErrorCallback" controls></video>
    </swiper-item>
    <swiper-item v-for="(item, index) in productIconUrl" :key="index">
      <image :src="item"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    presignedUrl: {
      type: String,
      default: ''
    },
    productIconUrl: {
      type: Array,
      default: () => []
    }
  },
  data: () => {
    return {
      videoContext: null
    }
  },
  methods: {
		swipeChange() {
			this.videoContext = uni.createVideoContext('myVideo');
			if (this.videoContext) {
				this.videoContext.stop();
			}
		},
		playVedio() {

		},
		videoErrorCallback(e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		},
  }
}
</script>

<style scoped>

.pages-swiper {
	width: 100%;
	height: 100vw;
}

.pages-swiper image {
	width: 100%;
	height: 100%;
}

#myVideo {
	width: 100%;
	height: 100%;
}

</style>
